<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/cookie.js"></script>
    <style>
        .header {
            background-color: #f5f5f5;
        }

        .header .header-nav {
            width: 1226px;
            margin: 0 auto;
            height: 40px;
            line-height: 40px;
        }

        .header .header-nav .header-nav-l,
        .header .header-nav .header-nav-r {
            font-size: 12px;
            display: flex;
        }

        .header .header-nav li {
            padding-right: 20px;
        }

        .header .header-nav .header-nav-l {
            float: left;
        }

        .header .header-nav .header-nav-r {
            float: right;
        }

        .header .header-nav .header-nav-l .hide {
            display: none;
        }

        .sign-tips a:first-child,
        .sign-user a:first-child {
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="header-nav">
            <ul class="header-nav-l">
                <li>湖北</li>
                <li class="sign-tips">
                    <a href="./login.html">亲,请登录</a>
                    <a href="./register.html">免费注册</a>
                </li>
                <li class="sign-user hide">
                    <a href="javascript:;" class="lg-user">欢迎您,xxx</a>
                    <a href="javascript:;" class="exit">退出登录</a>
                </li>
            </ul>
            <ul class="header-nav-r">
                <li><a href="">我的淘宝</a></li>
                <li><a href="">购物车</a></li>
                <li><a href="">收藏夹</a></li>
            </ul>
        </div>
    </div>
</body>
<script>
    // 主页面标识用户身份
    // 用户没登录 =>  亲,请登录  免费注册
    // 用户已登录 =>  欢迎,xxx   退出

    var signTips = document.getElementsByClassName("sign-tips")[0];
    var signUser = document.getElementsByClassName("sign-user")[0];

    var lgc = getCookie("lgc");
    if (lgc) {
        signTips.classList.add("hide");
        signUser.classList.remove("hide");
        var lgUser = signUser.getElementsByClassName("lg-user")[0];
        var exit = signUser.getElementsByClassName("exit")[0];

        lgUser.textContent = `欢迎您,${lgc}`;
        exit.onclick = function () {
            deleteCookie("lgc");
            location.reload();
        }
    }


</script>

</html>